<h2>基础代码</h2>
<p>页面加入以下基础代码，使用时在 <code>duxForm</code> 与 <code>duxFormPage</code> 中选择一种，</p>
<pre>
&lt;form action=&quot;&quot; method=&quot;post&quot; class=&quot;uk-form uk-form-horizontal&quot; id=&quot;form&quot;&gt;
...内部组件
&lt;/form&gt;
&lt;script&gt;
Do.ready('base', function () {
    //表单 - 只包含普通表单项目与表单验证AJAX提交
    $('#form').duxForm();
    //表单页 - 包含上传、图片预览等多功能表单组件
    $('#form').duxFormPage();
});
&lt;/script&gt;
</pre>
<h2>文本组件</h2>
<p>表单文本输入框组件，datatype为<a href="http://validform.rjboy.cn/document.html#dataType" target="_blank">表单验证规则</a>
</p>
<pre>
&lt;div class=&quot;uk-form-row&quot;&gt;
    &lt;label class=&quot;uk-form-label&quot;&gt;文本&lt;/label&gt;
    &lt;div class=&quot;uk-form-controls&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;uk-form-width-large&quot; id=&quot;&quot; name=&quot;&quot; datatype=&quot;s&quot; value=&quot;&quot;&gt;
        &lt;span class=&quot;uk-form-help-inline&quot;&gt;帮助提示&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<h2>TIP提示</h2>
<p>表单工具提示，可放置在任何元素，需要在元素加入 <code>data-uk-tooltip</code> 与 <code>title</code> 属性
</p>
<pre>
&lt;div class=&quot;uk-form-row&quot;&gt;
    &lt;label class=&quot;uk-form-label&quot;&gt;文本&lt;/label&gt;
    &lt;div class=&quot;uk-form-controls&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;uk-form-width-large&quot; id=&quot;&quot; name=&quot;&quot; data-uk-tooltip title="提示内容" value=&quot;&quot;&gt;
        &lt;p class="uk-form-help-block"&gt;块级帮助提示&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<h2>单选组件</h2>
<pre>
&lt;div class=&quot;uk-form-row&quot;&gt;
    &lt;label class=&quot;uk-form-label&quot;&gt;单选&lt;/label&gt;
    &lt;div class=&quot;uk-form-controls uk-form-controls-text&quot;&gt;
        &lt;label class=&quot;uk-margin-right&quot;&gt;
            &lt;?php if(!isset($info[ 'status'])) $info[ 'status']=1 ; ?&gt;
            &lt;?php if($info['status']){ ?&gt;
                &lt;input name=&quot;status&quot; value=&quot;1&quot; checked=&quot;checked&quot; type=&quot;radio&quot;&gt;
            &lt;?php }else{  ?&gt;
                &lt;input name=&quot;status&quot; value=&quot;1&quot; type=&quot;radio&quot;&gt;
            &lt;?php } ?&gt;
        正常&lt;/label&gt;
        &lt;label class=&quot;uk-margin-right&quot;&gt;
            &lt;?php if(!$info['status']){ ?&gt;
                &lt;input name=&quot;status&quot; checked=&quot;checked&quot; value=&quot;0&quot; type=&quot;radio&quot;&gt;
            &lt;?php }else{  ?&gt;
                &lt;input name=&quot;status&quot; value=&quot;0&quot; type=&quot;radio&quot;&gt;
            &lt;?php } ?&gt;
        禁用&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<h2>下拉组件</h2>
<pre>
&lt;select name=&quot;id&quot;&gt;
    &lt;?php if(!empty($list)) foreach($list as $vo){ ?&gt;
    &lt;?php if($info['id'] == $vo['id']){ ?&gt;
        &lt;option value=&quot;{$vo.group_id}&quot; selected&gt;
    &lt;?php } else { ?&gt;
        &lt;option value=&quot;{$vo.group_id}&quot;&gt;
    &lt;?php } ?&gt;
        &lt;?php echo $vo['name']; ?&gt;&lt;/option&gt;
    &lt;?php } ?&gt;
&lt;/select&gt;
</pre>
<h2>多选组件</h2>
<pre>
&lt;div class=&quot;uk-form-row&quot;&gt;
    &lt;label class=&quot;uk-form-label&quot;&gt;多选&lt;/label&gt;
    &lt;div class=&quot;uk-form-controls uk-form-controls-text&quot;&gt;
        &lt;label class=&quot;uk-margin-right&quot;&gt;
                &lt;input name=&quot;status&quot; value=&quot;1&quot; checked=&quot;checked&quot; type=&quot;radio&quot;&gt;
                    选项一
                &lt;/label&gt;
        &lt;label class=&quot;uk-margin-right&quot;&gt;
                &lt;input name=&quot;status&quot; value=&quot;2&quot; type=&quot;checkbox&quot;&gt;
                    选项二
                &lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<h2>日期与时间组件</h2>
<P>HTML部分，<code>data-format</code>为时间格式参数，<a href="http://sentsin.com/layui/laydate/" target="_blank">其他参数参考</a> ，设置class <code>js-time</code>为绑定
</P>
<pre>
&lt;div class=&quot;uk-form-row&quot;&gt;
    &lt;label class=&quot;uk-form-label&quot;&gt;日期与时间&lt;/label&gt;
    &lt;div class=&quot;uk-form-controls&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;uk-form-width-large js-time&quot; id=&quot;&quot; name=&quot;time[]&quot; value=&quot;&quot;  data-format="YYYY/MM/DD hh:mm:ss"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>js部分，如果调用<code>duxFormPage</code>方法则不需要以下js</p>
<pre>
&lt;script&gt;
    Do.ready('base', function () {
        $(&quot;.js-time&quot;).duxTime();
    });
&lt;/script&gt;
</pre>
<h2>图片预览</h2>
<p>html部分，<code>data-target</code>为图片URL文本框，设置class <code>js-image</code>为绑定</p>
<pre>
&lt;div class=&quot;uk-form-row&quot;&gt;
    &lt;label class=&quot;uk-form-label&quot;&gt;图片预览&lt;/label&gt;
    &lt;div class=&quot;uk-form-controls&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;uk-form-width-large&quot; id=&quot;image&quot; name=&quot;image&quot; datatype=&quot;s&quot; value=&quot;http://www.baidu.com/img/baidu_jgylogo3.gif&quot;&gt;
        &lt;button class=&quot;uk-button js-image&quot; type=&quot;button&quot; data-target=&quot;#image&quot;&gt;预览&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<P>js部分，如果调用<code>duxFormPage</code>方法则不需要以下js</P>
<pre>
&lt;script&gt;
    Do.ready('base', function () {
        $('.js-image').duxImage();
    });
&lt;/script&gt;
</pre>
<h2>编辑器</h2>
<p>html部分，使用百度Ueditor定制，保留常用操作，保留远程抓图、文件上传等功能，设置class <code>js-editor</code>为编辑器绑定</p>
<pre>
&lt;script type=&quot;text/plain&quot; class=&quot;js-editor&quot; id=&quot;myEditor&quot; style=&quot;width:100%;height:300px;&quot;&gt;
    内容
&lt;/script&gt;
</pre>
<P>js部分，如果调用<code>duxFormPage</code>方法则不需要以下js</P>
<pre>
&lt;script&gt;
    Do.ready('base', function(){
        $('.js-editor').duxEditor();
    })
&lt;/script&gt;
</pre>
<h2>上传组件</h2>
<P>HTML部分，上传为按钮操作<code>data-*</code>为JS参数,<code>data-target</code>为URL赋值文本框，设置class <code>js-file-upload</code>为文件上传绑定 <code>js-img-upload</code>为图片上传绑定</P>
<pre>
&lt;div class=&quot;uk-form-row&quot;&gt;
    &lt;label class=&quot;uk-form-label&quot;&gt;上传&lt;/label&gt;
    &lt;div class=&quot;uk-form-controls&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;uk-form-width-large&quot; id=&quot;image&quot; name=&quot;image&quot; datatype=&quot;s&quot; value=&quot;&quot;&gt;
        &lt;button class=&quot;uk-button js-file-upload&quot; type=&quot;button&quot; id=&quot;upload&quot; data-target=&quot;#image&quot;&gt;上传&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<P>js部分，如果调用<code>duxFormPage</code>方法则不需要以下js</P>
<pre>
&lt;script&gt;
    Do.ready('base', function () {
        $('.js-file-upload').duxFileUpload({
            //请求地址
            url: '/system/index.php?r=system/Upload/index',
            //上传格式用|分割
            type: '*',
            //请求附加参数
            params: function () {},
            //上传成功回调
            complete: function (data) {}
            
        });
    });
&lt;/script&gt; 
</pre>
<h2>组图上传</h2>
<P>HTML部分，<code>upload</code>为上传id，也为组图name值，<code>upload_sortable</code> 为组图操作区域，前缀需要与上传id一致，设置class <code>js-muliti-upload</code>为绑定</P>
<pre>
&lt;div class=&quot;uk-form-row&quot;&gt;
    &lt;label class=&quot;uk-form-label&quot;&gt;上传&lt;/label&gt;
    &lt;div class=&quot;uk-form-controls&quot;&gt;
        &lt;p&gt;
            &lt;button class=&quot;uk-button js-muliti-upload&quot; type=&quot;button&quot; id=&quot;upload&quot;&gt;上传&lt;/button&gt;
        &lt;/p&gt;
        &lt;ul class=&quot;uk-sortable uk-thumbnav&quot; id=&quot;upload_sortable&quot; data-uk-sortable&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<P>js部分，如果调用<code>duxFormPage</code>方法则不需要以下js</P>
<pre>
&lt;script&gt;
    Do.ready('base', function () {
        $('.js-muliti-upload').duxMultiUpload({
            //请求地址
            url: '/system/index.php?r=system/Upload/index',
            //上传格式用|分割
            type: '*',
            //请求附加参数
            params: function () {}
        });
    });
&lt;/script&gt; 
</pre>
<script>
    Do.ready('pre', function () {
        $("pre").addClass("prettyprint");
        prettyPrint();
    });
</script>